<template>
  <button @click="toggle">显示隐藏图片</button>
  <img v-show="show" alt="Vue logo" src="./assets/logo.png" />
  <hr />
  计数器：{{ count }} <button @click="increment">累加</button>
  <div>
    {{ msg }}
  </div>

  <div>学生{{student.name}}已经{{student.age}}岁了</div>

  res 的 name: {{ res.name }}
</template>
<script>
// // 选项式api
// export default {
//   data() {
//     return {
//       show: true,
//       count: 0,
//     };
//   },
//   methods: {
//     toggle() {
//       this.show = !this.show;
//     },
//     increment() {
//       this.count++;
//     },
//   },
//};

// 组合式 api
// ref 就是一个组合式API  
import { ref, reactive } from 'vue';
export default {
  setup () {
    // 显示隐藏
    const show = ref(true)
    const toggle = () => {
      show.value = !show.value
    }
    // 计数器
    const count = ref(0)
    const increment = () => {
      count.value ++
    }

    let msg = ref('你好世界')
    setTimeout(() => {
      msg.value = 'Hello world'
      console.log(msg);
    }, 2000);

    // 非响应式写法
    // const student = {
    //   name: 'tom',
    //   age: 17
    // }

    const student = reactive({
      name: 'rose',
      age: 17
    })

    setTimeout(() => {
      student.age ++
      console.log(student.age);
    }, 2000);

    // 模拟发请求, 返回一个对象
    const getStudentApi = () => {
      return {
        name: 'jerry',
        age: 19
      }
    }

    // 发请求前, 创建响应式数据
    // 发请求时, 因为一开始的数据结构不固定, 
    // 拿到结果需要整个对象进行覆盖, 建议用 ref 配合value
    // 就不会不小心失去响应式功能
    let res = ref({})
    console.log(1, res);

    setTimeout(() => {
      // 获取数据后, 用数据赋值响应式变量
      res.value = getStudentApi()
      console.log(res.value.name);
      console.log(2, res);
    }, 1000);

    return { show, toggle, count, increment, msg, student, res }
  }
};
</script>
